import React, {Component} from 'react';
import cs from 'classnames'
import BaseCmpt from '../BaseCmpt';
import './index.css';
import {Input, Button} from 'antd';

class CateList extends BaseCmpt {

    static defaultProps = {
        data: {
            type: 116,
            isOnly: true,
            style: {},
            layout: {
                ty: 'column'
            }
        }
    };

    constructor(props) {
        super(props);

        this.state = {};
    }

    render() {
        var {onSelected, selected, data} = this.props;
        var {style, layout} = data;
        var layoutTy = layout.ty;
        var marginLeft = parseFloat(style.marginLeft || 0);

        return (
            <div
                onClick={(e) => {
                    onSelected && onSelected(e)
                }}
                className={cs({
                    'cateList cmptEle': true,
                    'cmptEle_selected': selected,
                    'cateList_hor': layoutTy == 'hor'
                })}
                style={{...style}}
            >
                <div className="cateList__cateScroll">
                    <div className="cateList__cates">
                        <div className="cateList__cates__item active">全部</div>
                        <div className="cateList__cates__item">分类1</div>
                        <div className="cateList__cates__item">分类2</div>
                        <div className="cateList__cates__item">分类3</div>
                        <div className="cateList__cates__item">分类4</div>
                    </div>
                </div>

                <div className="cateList__goodsScroll">
                    <div className="curCateName">全部</div>

                    <div
                        className={cs({
                            'goodsList': true,
                            'goodsList_hor': layoutTy == 'hor'
                        })}
                    >
                        {
                            [1, 2, 3, 4].map(function () {
                                return (
                                    <div className="goods">
                                        <div className="goods__imgWrap">
                                            <img src="http://cdn1.taojinzi.com/xcx/defaultimg1.png" alt=""
                                                 className="goods__img"/>
                                        </div>
                                        <div className="goods__detail">
                                            <div className="goods__name">这里是商品名称</div>
                                            {
                                                layoutTy == 'hor' ?
                                                    <div className="goodsInfoWrap">
                                                        <div className="gModList__salesVolume">
                                                            <span className="gModList__salesVolume__item">n</span>人已购买
                                                        </div>
                                                        <div className="goods__price">
                                                            <span className="goods__price__unit">￥</span>100
                                                        </div>
                                                    </div>
                                                    :
                                                    <div className="goodsInfoWrap">
                                                        <div className="goods__price">
                                                            <span className="goods__price__unit">￥</span>100
                                                        </div>
                                                        <div className="gModList__salesVolume">
                                                            <span className="gModList__salesVolume__item">n</span>人已购买
                                                        </div>
                                                    </div>
                                            }
                                        </div>
                                    </div>
                                )
                            })
                        }
                    </div>
                </div>
            </div>
        );
    }


}

export default CateList;
